import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";

export default function useLazyData(methodsFn) {
  // 响应式数据返回，并实时监听所绑定的元素
  let target = ref(null);
  // 存放请求数据
  let result = ref([]);

  let { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // stop 是停止观察是否进入或移出可视区域的行为
        stop();
        // 发起请求，获取数据
        methodsFn.then((res) => {
          result.value = res.result;
        });
      }
    },
    { threshold: 0 }
  );

  return {
    target,
    result,
  };
}
